"""
演示网站：
    https://vue-draggable-plus.pages.dev/demo/basic/

注意：
    请关注 Joao 这个元素，我这个案例演示很好。

编码优化：
    source = lambda: driver.find_element_by_xpath("//*[text()='Joao']") ，换成这样仅仅利于代码编写
"""
# 导包
from time import sleep

from selenium import webdriver
from selenium.webdriver import ActionChains

# 获取浏览器驱动对象
driver = webdriver.Chrome()
driver.maximize_window()
# 谷歌浏览器不支持 --> 粘贴快捷键

# 打开url
driver.get("https://vue-draggable-plus.pages.dev/demo/tow-list/")
# 实例化并获取 ActionChains类
action = ActionChains(driver)
# 获取源元素
source = driver.find_element_by_xpath("//*[text()='Joao']")
# 获取目标元素
target = driver.find_element_by_xpath("//*[text()='Joao-2']")
sleep(2)
action.drag_and_drop(source, target).perform()

sleep(2)
# 扩展 通过坐标偏移量执行：上面的拖拽会导致页面的状态变更，这里必须重新获取一遍元素
source = driver.find_element_by_xpath("//*[text()='Joao']")
ActionChains(driver).drag_and_drop_by_offset(source, xoffset=-200, yoffset=30).perform()

# 暂停3秒
sleep(5)

# 关闭浏览器驱动对象
driver.close()
